<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="选择巡检项模版" width="60%" align-center>
      <px-form
        ref="formRef"
        @submit.native.prevent
        class="custom-form-ui inspect-form"
        :model="queryParams"
        label-position="right"
        label-width="120px"
      >
        <px-row :gutter="22">
          <px-col :span="8">
            <px-form-item label="巡检项模版" prop="temCodeOrName">
              <px-input
                v-model="queryParams.temCodeOrName"
                placeholder="请输入巡检项名称/编号"
                maxlength="50"
                clearable
                @blur="queryParams.temCodeOrName = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="16">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-row>
        <px-col>
          <InspectRulesTable
            v-model:query-params="queryParams"
            :table-data="tableData"
            :table-columns="INSPECT_RULE_DIALOG_TEMPLATE_TABLE_COLUMNS"
            :total="total"
            :multiple="multiple"
            @select-items="selectTreeItems"
            @query-table="queryTable"
        /></px-col>
      </px-row>
      <template #footer>
        <span class="dialog-footer-btn">
          <px-button @click="close">取消</px-button>
          <px-button type="primary" @click="confirm"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { queryPage } from "@/api/equip/inspectTemplate";
import { stringTrimOfParams } from "@/utils/common";
import { ref, watch } from "vue";
import { INSPECT_RULE_DIALOG_TEMPLATE_TABLE_COLUMNS } from "../config";
import InspectRulesTable from "./InspectRulesTable.vue";

const dialogVisible = defineModel("isView");
const queryParams = ref({ temCodeOrName: "", pageNum: 1, pageSize: 20 });
const tableData = ref<any>([]);

defineOptions({
  name: "SelectInspectRules"
});
const props = defineProps(["className", "inspectArea", "inspectContentTypes", "multiple"]);
const emits = defineEmits(["selectItems"]);
const total = ref(0);
const formRef = ref();
let selected: any[] = [];
async function queryTable() {
  const { className, inspectArea, inspectContentTypes } = props;
  const params = Object.assign(queryParams.value, {
    className,
    inspectAreaList: inspectArea,
    isShowTemContent: true,
    inspectContentTypes
  });
  let tableDataRaw = await queryPage(stringTrimOfParams(params));
  const { data, pageNum, pageSize, total: totalRaw } = tableDataRaw;
  queryParams.value.pageNum = pageNum;
  queryParams.value.pageSize = pageSize;
  total.value = totalRaw;
  tableData.value = data;
}
watch(
  dialogVisible,
  async val => {
    if (val) {
      await queryTable();
    } else {
      formRef.value?.resetFields();
    }
  },
  { immediate: true }
);
function resetTable() {
  formRef.value?.resetFields();
  queryTable();
}
function selectTreeItems(val) {
  selected = val;
}
function close() {
  dialogVisible.value = false;
}
function confirm() {
  emits("selectItems", selected);
  dialogVisible.value = false;
  selected = [];
}
</script>
<style lang="scss" scoped>
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
  :deep(.px-table__cell) {
    padding: 0;
    height: 36px;
    line-height: 36px;
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}
:deep(.px-button + .px-button) {
  margin-left: 8px;
}
:deep(.px-dialog__footer) {
  padding: 0 24px;
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
